<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程页面_史怀志</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="script.js" defer></script>
</head>
<body>
    <p class="target1">在线学习</p>

    <div class="myTitle" >
        <div class="left">
            <p class="target2"> 入门·小程序开发起步</p>
        </div>
        <div class="right">
            <button id="row1prevBtn" >
                <img src="images/left.png" alt="左">
            </button>
            <span id="row1currentPage">1</span><span>/3</span>
            <button id="row1nextBtn">
                <img src="images/right.png" alt="右">
            </button>
        </div>
    </div>

    <!--第一行-->
    <div class="row" id="row1">
        <!--第一页-->
        <div class="card" data-page="1">
            <img src="images/row1-ad1.png" alt="图1-1">
            <p class="target3">从0到1开发一个小程序</p>
            <p class="target4">14课程·3713人已学</p>
        </div>
        <div class="card" data-page="1">
            <img src="images/row1-ad2.png" alt="图1-2">
            <p class="target3">入驻开发平台</p>
            <p class="target4">2课程·1198人已学</p>
        </div>
        <div class="card" data-page="1">
            <img src="images/row1-ad3.png" alt="图1-3">
            <p class="target3">创建小程序</p>
            <p class="target4">2课程·751人已学</p>
        </div>
        <div class="card" data-page="1">
            <img src="images/row1-ad4.png" alt="图1-4">
            <p class="target3">安装开发者工具</p>
            <p class="target4">1课程·192人已学</p>
        </div>

        <!--第二页-->
        <div class="card" data-page="2" style="display: none">
            <img src="images/row1-ad5.png" alt="图1-1">
            <p class="target3">框架语法</p>
            <p class="target4">10课程·516人已学</p>
        </div>
        <div class="card" data-page="2" style="display: none">
            <img src="images/row1-ad6.png" alt="图1-2">
            <p class="target3">小程序API</p>
            <p class="target4">10课程·11238人已学</p>
        </div>
        <div class="card" data-page="2" style="display: none">
            <img src="images/row1-ad7.png" alt="图1-3">
            <p class="target3">小程序提审、发布与运营</p>
            <p class="target4">15课程·751人已学</p>
        </div>
        <div class="card" data-page="2" style="display: none">
            <img src="images/row1-ad8.png" alt="图1-4">
            <p class="target3">轻松入门小程序云开发</p>
            <p class="target4">5课程·192人已学</p>
        </div>

        <!--第三页-->
        <div class="card" data-page="3" style="display: none">
            <img src="images/row1-ad9.png" alt="图1-1">
            <p class="target3">认识支付宝开发者助手</p>
            <p class="target4">14课程·3713人已学</p>
        </div>
        <div class="card" data-page="3" style="display: none">
            <img src="images/row1-ad10.png" alt="图1-2">
            <p class="target3">支付宝小程序云产品介绍</p>
            <p class="target4">2课程·1198人已学</p>
        </div>
    </div>


    <!--第二行-->
    <div class="myTitle" >
        <div class="left">
            <p class="target2">进阶·小程序开发实战</p>
        </div>
        <div class="right">
            <img src="images/left.png" alt="左">
            <p>1/3</p>
            <img src="images/right.png" alt="右">
        </div>
    </div>

    <div class="row" id="row2">
        <div class="card">
            <img src="images/row2-ad1.png" alt="图2-1">
            <p class="target3">支付宝小程序callContainer指南</p>
            <p class="target4">1课程·65人已学</p>
        </div>
        <div class="card">
            <img src="images/row2-ad2.png" alt="图2-2">
            <p class="target3">如何快速使用小程序云托管</p>
            <p class="target4">1课程·16人已学</p>
        </div>
        <div class="card">
            <img src="images/row2-ad3.png" alt="图2-3">
            <p class="target3">能力接入|接入红包，客流没烦恼</p>
            <p class="target4">2课程·331人已学</p>
        </div>
        <div class="card">
            <img src="images/row2-ad4.png" alt="图2-4">
            <p class="target3">能力接入|花样发券的N种方式</p>
            <p class="target4">4课程·243人已学</p>
        </div>
    </div>

    <!--第三行-->
    <div class="myTitle" >
        <div class="left">
            <p class="target2">资深·小程序质量提升工具</p>
        </div>
        <div class="right">
            <img src="images/left.png" alt="左">
            <p>1/1</p>
            <img src="images/right.png" alt="右">
        </div>
    </div>
    <div class="row" >
        <div class="card">
            <img src="images/row3-ad1.png" alt="图3-1">
            <p class="target3">性能优化解决方案</p>
            <p class="target4">3课程·222人已学</p>
        </div>
        <div class="card">
            <img src="images/row3-ad2.png" alt="图3-2">
            <p class="target3">稳定性优化解决方案</p>
            <p class="target4">4课程·96人已学</p>
        </div>
    </div>
</body>
</html>